import React, { useState } from "react";
import styles from "./index.module.css";
import { componentNameList } from "../../router";
import { useNavigate } from "react-router-dom";
export default function Index() {
  const Navigate = useNavigate();
  const [active, setActive] = useState(0);
  const toTarget = (e, index) => {
    Navigate(e);
    setActive(index);
  };
  return (
    <div className={styles.container}>
      {componentNameList.map((item, index) => (
        <div
          key={item}
          className={[styles.list, index === active ? styles.active : ""].join(
            " "
          )}
          onClick={() => toTarget(item, index)}
        >
          {item}
        </div>
      ))}
    </div>
  );
}
